<template>
  <div>
    <div class="circleImage" id="myChart" ref="myChart"></div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      chart: null,
    };
  },
  methods: {
    initChart() {
      const myChart = this.$echarts.init(this.$refs.myChart);
      var fontColor = "#fff";
      var fontSize = 10;
      var data = [
        {
          name: "中央",
          value: 456,
        },
        {
          name: "自治区",
          value: 231,
        },
        {
          name: "盟市",
          value: 121,
        },
        {
          name: "旗县区",
          value: 45,
        },
        {
          name: "整合资金",
          value: 154,
        },
        {
          name: "其他",
          value: 67,
        },
      ];

 

      var option = {
        color: [
          "#bf19ff",
          "#854cff",
          "#5f45ff",
          "#02cdff",
          "#314976",
          "#f9e264",
          "#f47a75",
          "#009db2",
          "#024b51- 0780cf",
          "#765005",
        ],
        backgroundColor: "#000066",
        title: {
          text: 7789,
          subtext: "总计",
          textStyle: {
            color: "#f2f2f2",
            fontSize: 20,
          },
          subtextStyle: {
            fontSize: 20,
            color: ["#ff9d19"],
          },
          x: "center",
          y: "center",
        },
        grid: {
          bottom: 10,
          left: 100,
          x:50,
          y:50,
          x2:60,
          y2:60,
    

          // right: "10%",

        },
        tooltip: {
          trigger: "item",
          formatter: "{b}<br/> {c}亿元  ({d}%)",
        },
        legend: {
          orient: "vertical",
          right: 5,
          textStyle: {
            color: "#f2f2f2",
            fontSize: 8,
          },
          icon: "roundRect",
          data: data,
        },
        series: [
          // 主要展示层的
          {

            radius: ["50%", "90%"],
            center: ["50%", "50%"],
            type: "pie",
            label: {
              position: "inner",
              formatter: "{b}：{c}亿元",
              textStyle:{
                fontSize:10
              }

            },
         
            
            labelLine: {
              normal: {
                show: true,
                length: 30,
                length2: 55,
              },
              emphasis: {
                show: true,
              },
            },
            data: data,
          },
          {
            radius: ["45%", "50%"],
            center: ["50%", "50%"],
            type: "pie",
            label: {
              normal: {
                // show: false,
                textStyle:{
                  color:'rgba(255, 255, 255, 0.3)'
                }
                
              },
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            animation: false,
            tooltip: {
              show: false,
            },
            data: [
              {
                value: 1,
                itemStyle: {
                  
                  color: "rgba(250,250,250,0.3)",
                  
                },
              },
            ],
          },
          {
            name: "外边框",
            type: "pie",
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            center: ["50%", "50%"],
            radius: ["100%", "100%"],
            label: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: 9,
                name: "",
                itemStyle: {
                  normal: {
                    borderWidth: 2,
                    borderColor: "#0b5263",
                  },
                },
              },
            ],
          },
        ],
      };

      myChart.setOption(option);
    },
  },
  mounted() {
    this.initChart();
  },
};
</script>

<style lang="scss">
  .circleImage {
    width: 80%;
    height: 80%;
    display: flex;
    justify-content: center;
    outline: none;
  }
</style>